<template>
	<view class="like">
		<Top :title='title' :white='true'></Top>
		<!-- <view class="scroll">
			<view class="big_box">
				<view class="box_h" v-for="(item,i) in list" :key="i">
					<view class="box_img">
						<image class="imk" :src="item.image_src"></image>
						<view :class="xuan==i?'cancel':'qian'" @click="cancel(item,i)"></view>
						<view class="jiad">服务费：￥{{item.money}}</view>
					</view>
					<view class="zhuangtai">
						<view class="zl">
							{{item.name}}
							<view class="jiya">从业7年</view>
						</view>
						<view class="zr" :class="{man:item.day_type!=1}">{{item.day_type==1?'空':item.day_type==2?'满':item.day_type==3?'休':''}}</view>
					</view>
					<view class="nam_box">
						<view class="name">{{item.t_type}}</view>
						<view class="dian" :class="{yic:false}">
							<view class="icon" :class="{dians:false}"></view>
							收藏
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="" v-if="list.length==0" style="padding-top: 50rpx;color: #ccc;text-align: center;">
			今日暂无{{type==2?'摄影师':'化妆师'}}
		</view>
		<zero-waterfall v-else :isShowFree="isShowFree" @clickTeacher="selectTeacher" :selectedIds="selectedId" :list="list" type="5" :status="status" styleType="6">
		</zero-waterfall>
		<view class="" style="height: 110rpx;">
			
		</view>
		<view class="qued" @click="addstea()">确定</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import Top from '../../components/navBox/top.vue'
	export default {
		data() {
			return {
				title: '',
				list: [],
				type: '',
				type_id:'',
				time:'',
				selectedObj:{},
				page:1,
				status: 0,
				last_page:0,
				sysId:0,
				selectedId:0,
				isShowFree:true,
				shopId:-1,
			}
		},
		components: {
			Top
		},
		computed: {

		},
		onReachBottom() {
			if (this.page >= this.last_page) {
				this.$wanlshop.msg('我是有底线的!')
			} else {
				this.status = 0;
				this.page++;
				this.goNest();
			}
		},
		onLoad(option) {
			let obj = JSON.parse(option.obj);
			this.type = obj.type;
			if(obj.shopId){
				this.shopId = obj.shopId;
			}
			this.type_id = obj.type_id;
			this.time = obj.time;
			if(obj.isShowFree&&obj.isShowFree==1){
				this.isShowFree = false;
			}
			if(obj.sysId){
				this.sysId = obj.sysId;
			}
			if (this.type == 2) {
				this.title = '选择摄影师'
				if(uni.getStorageSync('addTeacher').id){
					this.selectedId = uni.getStorageSync('addTeacher').id;
					this.selectedObj = uni.getStorageSync('addTeacher');
				}
			} else {
				this.title = '选择化妆师'
				if(uni.getStorageSync('addTeacher2').id){
					this.selectedId = uni.getStorageSync('addTeacher2').id;
					this.selectedObj = uni.getStorageSync('addTeacher2');
				}
			}
			this.list = []
			this.page = 1
			this.goNest()
		},
		methods: {
			selectTeacher(item){
				this.selectedObj = item;
			},
			//选择老师列表
			goNest() {
				this.$request({
					url: 'wedding/worker_appointment_worker',
					method: 'POST',
					data: {
						shop_id: this.shopId != -1 ? this.shopId : this.$store.state.shopsname.id,
						type_id: this.type_id,
						type: this.type == 2 ? 1 : 2,
						time: this.time,
						page: this.page,
						sys_id: this.sysId
					}
				}).then(res => {
					if (res.data.data.data.length == 0) {
						uni.showToast({
							title: this.type == 2 ? '暂无指定摄影师' : '暂无指定化妆师',
							icon:'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 800)
					} else {
						if (this.list.length == 0) {
							this.list = res.data.data.data
						} else {
							this.list = this.list.concat(res.data.data.data)
						}
					}
					this.last_page = res.data.data.last_page;
				})
			},
			addstea() {
				if(this.type == 2){
					//选择摄影师
					uni.setStorageSync('addTeacher',this.selectedObj);
				}else{
					//选择化妆师
					uni.setStorageSync('addTeacher2',this.selectedObj);
				}
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F4F4F4;
	}
</style>
<style scoped lang="scss">

	.scroll {
		.big_box {
			width: 686upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 24upx;

			.box_h {
				width: 336upx;
				background: #FFFFFF;
				border-radius: 8upx;
				padding-bottom: 34upx;
				margin-bottom: 14upx;

				.box_img {
					width: 100%;
					height: 336upx;
					border-radius: 8upx;
					overflow: hidden;
					position: relative;

					.imk {
						width: 100%;
						height: 100%;
					}

					.qian {
						position: absolute;
						right: 20upx;
						top: 20upx;
						width: 48upx;
						height: 48upx;
						background: url(../../static/teacher/k.png)no-repeat center;
						background-size: 100%;
					}

					.cancel {
						position: absolute;
						right: 20upx;
						top: 20upx;
						width: 48upx;
						height: 48upx;
						background: url(../../static/teacher/kx.png)no-repeat center;
						background-size: 100%;
					}

					.jiad {
						width: 100%;
						height: 64upx;
						bottom: 0;
						left: 0;
						position: absolute;
						background: rgba(0, 0, 0, 0.3);
						text-align: center;
						line-height: 64upx;
						color: #fff;
						font-size: 24upx;
					}
				}

				.zhuangtai {
					width: 304upx;
					margin: 0 auto;
					margin-top: 24upx;
					display: flex;
					justify-content: space-between;

					.zl {
						color: #000;
						font-size: 32upx;
						font-weight: 550;

						.jiya {
							display: inline-block;
							color: #333;
							font-size: 20upx;
							margin-left: 14upx;
							font-weight: 500;
						}
					}

					.zr {
						width: 46upx;
						height: 46upx;
						text-align: center;
						line-height: 46upx;
						border: 2upx solid rgba(0, 0, 0, 0.14);
						color: #000;
						font-size: 20upx;
						border-radius: 23upx;

						&.man {
							color: #FF3F4A;
						}
					}
				}

				.nam_box {
					width: 304upx;
					margin: 0 auto;
					margin-top: 28upx;
					display: flex;
					justify-content: space-between;

					.name {
						color: #999;
						font-size: 24upx;
						line-height: 30upx;
					}

					.dian {
						color: #999;
						font-size: 22upx;
						line-height: 30upx;

						&.yic {
							color: #8A8A8A;
						}

						.icon {
							width: 30upx;
							height: 30upx;
							background: url(../../static/teacher/dian.png)no-repeat center;
							background-size: 100%;
							display: inline-block;
							vertical-align: middle;
							margin-top: -8upx;
							margin-right: 8upx;

							&.dians {
								background: url(../../static/teacher/diany.png)no-repeat center;
								background-size: 100%;
							}
						}
					}
				}
			}
		}
	}

	.qued {
		position: fixed;
		width: 686upx;
		height: 80upx;
		background: #111111;
		border-radius: 40upx;
		color: #fff;
		font-size: 28upx;
		bottom: 10upx;
		left: 50%;
		margin-left: -343upx;
		text-align: center;
		line-height: 80upx;
	}
</style>
